﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <div style="padding: 20px;">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>

  

    <!-- 工具栏模板（包含添加按钮） -->
    <script type="text/html" id="toolbarDemo">

              <!--条件查询-->
        <form class="layui-form layui-row layui-col-space16" id="searchForm" lay-filter="searchFormFilter">
            <div class="layui-input-inline">
                <div class="layui-input-inline">
                    <label class="layui-input-inline" >部门名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="DepartName" placeholder="请输入部门名称" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-input-inline">
                @* <button class="layui-input-inline" lay-submit lay-filter="searchSubmit">查询</button> *@
                <button type="button" class="layui-btn layui-btn-radius" lay-submit lay-filter="searchSubmit">查询</button>
                <button type="reset" class="layui-btn layui-btn-radius" lay-submit lay-filter="searchSubmit">重置</button>
                @* <button type="reset" class="layui-input-inline">重置</button> *@
            </div>
        </form>

        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addData">添加数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
            <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
                重载测试
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
                <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
        </div>
    </script>

    <!-- 单元格操作模板 -->
    <script type="text/html" id="toolDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs" lay-event="more">
                更多
                <i class="layui-icon layui-icon-down"></i>
            </a>
        </div>
    </script>

    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['table', 'dropdown', 'layer', 'form', 'jquery'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;


            // 表格实例
            var tableIns;

            // 初始化表格
            function initTable() {
                tableIns = table.render({ // 关键：将表格实例赋值给tableIns
                    elem: '#test',
                    /* url: 'https://localhost:7174/api/Message/GetDepart', */ // 后端数据接口
                    url: "@ViewBag.BaseUrl/T5/Message/GetDepart",
                    toolbar: '#toolbarDemo',
                    defaultToolbar: ['filter', 'exports', 'print', {
                        title: '提示',
                        layEvent: 'LAYTABLE_TIPS',
                        icon: 'layui-icon-tips',
                        onClick: function () {
                            layer.alert('自定义工具栏图标按钮');
                        }
                    }],
                    height: 'full-35',
                    css: ['.layui-table-tool-temp{padding-right: 145px;}'].join(''),
                    cellMinWidth: 80,
                    totalRow: true,
                    
                    cols: [[
                        { type: 'checkbox', fixed: 'left' },
                        { field: 'departId', fixed: 'left', width: 400, title: 'ID', sort: true},
                        { field: 'departName', width: 400, title: '部门名称' },
                        { field: 'departPIdName', width: 400, title: '上级部门名称' },
                    ]],
                    error: function (res, msg) {
                        console.error('表格加载失败:', res, msg);
                    }
                });
            }
            initTable();

            // 条件查询逻辑
            form.on('submit(searchSubmit)', function (data) {
                console.log('发送的查询参数：', data.field);
                if (!tableIns) {
                    layer.msg('表格未初始化，请检查页面加载');
                    return false;
                }
                tableIns.reload({
                    where: data.field, // 传递查询参数
                    page: { curr: 1 }, // 重置到第一页
                    done: function (res, curr, count) {
                        if (res.data.length === 0) {
                            layer.msg('未查询到符合条件的数据', { icon: 2 });
                        }
                    }
                });
                return false;
            });


            // 工具栏事件处理
            table.on('toolbar(test)', function (obj) {
                switch (obj.event) {
                    case 'addData':
                        openAddDialog(); // 打开添加弹窗
                        break;
                    case 'getCheckData':
                        var checkStatus = table.checkStatus(obj.config.id);
                        var data = checkStatus.data;
                        layer.alert(layui.util.escape(JSON.stringify(data)));
                        break;
                    case 'getData':
                        var currentData = table.getData(obj.config.id);
                        layer.alert(layui.util.escape(JSON.stringify(currentData)));
                        break;
                }
            });

            // 打开添加弹窗
            function openAddDialog() {
                layer.open({
                    type: 1,
                    title: '添加部门',
                    content: `
                                <form class="layui-form" id="addForm">

                                             

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">部门名称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="departName" placeholder="请输入部门名称" class="layui-input" required>
                                        </div>
                                    </div>

                                             <div class="layui-form-item">
                                                               <label class="layui-form-label">上级部门</label>
                                                                 <div class="layui-input-block">
                                                                     <select name="departPId" class="layui-select" required>
                                                                         <option value="">请选择上级部门</option>
                                                                         <option value="1">总裁部</option>
                                                                         <option value="2">总裁办</option>
                                                                         <option value="3">总经理部</option>
                                                                         <option value="4">副总经理部</option>
                                                                         <option value="5">部门经理部</option>
                                                                         <option value="6">副部门经理部</option>
                                                                         <option value="7">秘书部</option>
                                                                         <option value="8">员工部</option>
                                                                         <option value="9">外包1部</option>
                                                                         <option value="10">外包2部</option>
                                                                         <option value="11">外包三部</option>
                                                                         <option value="12">外包四部</option>
                                                                     </select>
                                                                 </div>
                                            </div>

                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="addSubmit">提交</button>
                                        </div>
                                    </div>
                                </form>
                            `,
                    area: ['800px', '600px'],
                    success: function (layero) {
                        form.render(); // 渲染表单元素
                        form.on('submit(addSubmit)', function (data) {
                            addDepartment(data.field); // 提交数据到后端
                            return false; // 阻止表单默认提交
                        });
                    }
                });
            }

            // 发送添加请求到后端
            function addDepartment(data) {
                layer.load(2); // 显示加载动画
                $.ajax({
                    /*  url: 'https://localhost:7272/api/Message/DepartAdd', */ // 后端添加接口
                    url: "@ViewBag.BaseUrl/T6/Message/DepartAdd",
                    type: 'POST',
                    headers: {
                        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VyTmFtZSI6IlpDIiwiVXNlcklkIjoiMSIsImV4cCI6MTc0MzA0NTAwOSwiaXNzIjoiZ3JvdXBUd28iLCJhdWQiOiJncm91cFR3byJ9.o5KYnBxK-O0VAF14_yv1hTRDUIiNNY023m0Cy2VkTgE',
                        'Content-Type': 'application/json'
                    },
                    data: JSON.stringify(data),
                    success: function (res) {
                        layer.closeAll('loading'); // 关闭加载动画
                        if (res.code === 212) { // 根据后端实际状态码调整
                            layer.msg('添加成功', { icon: 1 });
                            layer.closeAll(); // 关闭弹窗
                            table.reload('test'); // 刷新表格数据
                        } else {
                            layer.msg('添加失败: ' + (res.message || '未知错误'), { icon: 2 });
                        }
                    },
                    error: function (xhr) {
                        layer.closeAll('loading');
                        layer.msg('网络请求失败: ' + xhr.status, { icon: 2 });
                        console.error('AJAX请求失败:', xhr.responseText);
                    }
                });
            }

            // 下拉按钮、重载测试等原有功能代码（保持不变）
            // ...（原有dropdown相关代码可根据需要保留）
            // 重载测试
            dropdown.render({
                elem: '#reloadTest', // 可绑定在任意元素中，此处以上述按钮为例
                data: [{
                    id: 'reload',
                    title: '重载'
                }, {
                    id: 'reload-deep',
                    title: '重载 - 参数叠加'
                }, {
                    id: 'reloadData',
                    title: '仅重载数据'
                }, {
                    id: 'reloadData-deep',
                    title: '仅重载数据 - 参数叠加'
                }],
                // 菜单被点击的事件
                click: function (obj) {
                    switch (obj.id) {
                        case 'reload':
                            // 重载 - 默认（参数重置）
                            table.reload('test', {
                                where: {
                                    abc: '123456',
                                    //test: '新的 test2',
                                    //token: '新的 token2'
                                },
                              
                            });
                            break;
                        case 'reload-deep':
                            // 重载 - 深度（参数叠加）
                            table.reload('test', {
                                where: {
                                    abc: 123,
                                    test: '新的 test1'
                                },
                                //defaultToolbar: ['print'], // 重载头部工具栏右侧图标
                                //cols: ins1.config.cols
                            }, true);
                            break;
                        case 'reloadData':
                            // 数据重载 - 参数重置
                            table.reloadData('test', {
                                where: {
                                    abc: '123456',
                                    //test: '新的 test2',
                                    //token: '新的 token2'
                                },
                                scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
                                height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                                //url: '404',
                                //page: {curr: 1, limit: 30} // 重新指向分页
                            });
                            break;
                        case 'reloadData-deep':
                            // 数据重载 - 参数叠加
                            table.reloadData('test', {
                                where: {
                                    abc: 123,
                                    test: '新的 test1'
                                }
                            }, true);
                            break;
                    }
                    layer.msg('可观察 Network 请求参数的变化');
                }
            });

            // 行模式
            dropdown.render({
                elem: '#rowMode',
                data: [{
                    id: 'default-row',
                    title: '单行模式（默认）'
                }, {
                    id: 'multi-row',
                    title: '多行模式'
                }],
                // 菜单被点击的事件
                click: function (obj) {
                    var checkStatus = table.checkStatus(id)
                    var data = checkStatus.data; // 获取选中的数据
                    switch (obj.id) {
                        case 'default-row':
                            table.reload('test', {
                                lineStyle: null // 恢复单行
                            });
                            layer.msg('已设为单行');
                            break;
                        case 'multi-row':
                            table.reload('test', {
                                // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                                lineStyle: 'height: 95px;'
                            });
                            layer.msg('即通过设置 lineStyle 参数可开启多行');
                            break;
                    }
                }
            });
        });
    </script>
</body>
</html>